<template>
  <div class="list-data">
      <nly-row class="search mb-2">
        <nly-col sm="8" style="padding-left:70px;">
            <a-input
            style="margin-bottom: 8px"
            placeholder="请输入添加的内容"
            v-model="inputVal"
            />
        </nly-col>
        <nly-col sm="4" class="right">
            <nly-button variant="info" @click="addItem" button-class="mr-2">添加</nly-button>
        </nly-col>
      </nly-row>

        <a-list  item-layout="horizontal" :data-source="list" size="small">
            <a-list-item slot="renderItem" slot-scope="item,index" :key="index" title="上下推动排序">
                <span style="width:80px;">排序:{{index + 1}}</span>
                <a-input  :value="item"  @change="inputChange($event,index)"></a-input>
                <a slot="actions" @click="deleteItem(index)" style="color:#dc3545;">删除</a>
            </a-list-item>
        </a-list>
        <nly-row class="mt-2" style="justify-content: center;" >
            <nly-button variant="info" @click="onSubmit"  button-class="mr-2" :title="submitBtnTitle">{{submitBtnText}}</nly-button>
        </nly-row>
  </div>

</template>

<script>
import {DisAbleFirfoxDrag} from "@/utils/browser";
import Sortable from 'sortablejs';

export default {
    name:"ListDataManager",
    props: {
        list: {
            type: Array,
            default: () => []
        },
        value: {
            type: [String, Array],
            default: ""
        }, 
        callBack:{
            type:Function,
            default: null
        },
        submitBtnText:{
            type: String,
            default: "确 定"
        },
        submitBtnTitle:{
            type: String,
            default: "请点击‘全部保存’进行提交"
        }
    },
    data() {
        return {
        inputVal:"",
        // list: dataList,
        isDrag: false
        };
    },
    created(){
        DisAbleFirfoxDrag();
       
    },
    mounted() {
         this.drag();
    },
    methods: {
        addItem(){
            let {inputVal,list,isDrag} = this;
            if(!inputVal)return false;
            let find =  list.find(f=>f == inputVal);
            console.log("--ListDataManager--自定义 数据---",list);
            if(find){
              this.$info({
                  title: "提示",
                  content: '不可添加重复数据',
              });
              return false;
            }
            this.list.push(inputVal);
            this.inputVal = "";
            if(this.list.length > 0 && !isDrag){
                this.drag();
            }
        },
        deleteItem(index){
            let {list,isDrag} = this;
            list.splice(index,1);
            if(list.length == 0 && isDrag){
                this.isDrag = false;
            }
        },
        inputChange(e,index){
            let newVal = e.target.value;
            this.$set(this.list,index,newVal);
        },
        onSubmit() {
            let {callBack} = this;
            //更新 props
            this.$emit("input", this.list.join(","));
            if(callBack){
                callBack();
            }
        },
        // 拖动
        drag () {

            // 首先获取需要拖拽的dom节点
            const el1 = document.querySelectorAll('.ant-list-items')[0];
            if(!el1)return false;
            this.isDrag = true;
            Sortable.create(el1, {
            disabled: false, // 是否开启拖拽
            ghostClass: 'sortable-ghost', //拖拽样式
            animation: 150, // 拖拽延时，效果更好看
            group: { // 是否开启跨表拖拽
                pull: false,
                put: false
            },
            onEnd: (e) => { // 这里主要进行数据的处理，拖拽实际并不会改变绑定数据的顺序，这里需要自己做数据的顺序更改
                let arr = this.list; // 获取表数据
                
                console.log("e.newIndex",e.newIndex,"e.oldIndex",e.oldIndex);
                let removeItem = arr.splice(e.oldIndex, 1)[0];
               
                arr.splice(e.newIndex, 0, removeItem); // 数据处理
                console.log("arr",arr);
                //提前 赋值一个带值的数组（BUG 修复）
                this.list= [1]; 
                this.$nextTick(function () {
                    this.list= [...arr]; 
                });
            }
            });
        }
        
    },
    watch: {
    
    }
};
</script>
<style lang="less">
   .list-data {
        .ant-list-item{
            cursor: move;
            a{
                cursor: pointer;
            }
        }
        .search{
        border-bottom: 1px solid #eee;
    }
   }
</style>
